<template>
  <Modal
    v-model="showTestsuiteExtMethodEdit"
    title="编辑扩展方法"
    :mask-closable="false"
    :closable="false"
    fullscreen
    @on-cancel="handleTestsuiteExtMethodCancel"
  >
    <Form :model="extMethodForm" ref="extMethodForm" :rules="extMethodValidate">
      <FormItem label="方法名称">
        <Input clearable v-model="extMethodForm.ext_method_name" />
      </FormItem>
      <FormItem label="扩展方法" prop="ext_method">
        <AutoComplete
          :data="extMethodData"
          transfer
          clearable
          placeholder="请输入扩展方法"
          v-model="extMethodForm.ext_method"
          style="width: 100%"
          :filter-method="filterExtMethod"
        >
        </AutoComplete>
      </FormItem>
      <div>
        <label class="expect-result-label">期望结果</label>
        <JsonEditor
          v-model="extMethodForm.expect_result"
          jsonEditorId="editTestsuiteExtMethodExpectResult"
          style="height: 750px; margin-top: 8px"
        ></JsonEditor>
      </div>
    </Form>
    <div slot="footer">
      <Button type="default" @click="handleTestsuiteExtMethodCancel"
        >取消</Button
      >
      <Button
        type="primary"
        @click="handleTestsuiteExtMethodSubmit('extMethodForm')"
        >确定</Button
      >
    </div>
  </Modal>
</template>
<script>
import { getExtMethods } from "@/api/HttpAutoTestService/ext-method";
import JsonEditor from "_c/json-editor";
export default {
  name: "testsuite-ext-method-edit",
  props: {
    testsuiteExtMethodEdit: {
      type: Boolean,
      default: false,
    },
    extMethod: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {
    JsonEditor,
  },
  computed: {
    showTestsuiteExtMethodEdit: {
      get() {
        return this.testsuiteExtMethodEdit;
      },
      set(val) {
        this.$emit("update:testsuiteExtMethodEdit", val);
      },
    },
  },
  watch: {
    extMethod(val) {
      if (this.showTestsuiteExtMethodEdit && val) {
        this.extMethodForm = { ...val };
      }
    },
  },
  mounted() {
    getExtMethods()
      .then((res) => {
        const data = res.data;
        this.extMethodData = data.results.map((item) => {
          return item.ext_method;
        });
      })
      .catch((err) => {
        this.$Modal.error({
          title: "系统异常，请联系管理员……",
          content: JSON.stringify(err),
          closable: true,
        });
      });
  },
  data() {
    return {
      extMethodForm: {
        index: null,
        ext_method_name: "",
        type: "",
        ext_method: "",
        expect_result: {},
      },
      extMethodValidate: {
        ext_method: [
          { required: true, message: "请输入扩展方法", trigger: "blur" },
        ],
      },
      extMethodData: [],
    };
  },
  methods: {
    handleTestsuiteExtMethodCancel() {
      this.showTestsuiteExtMethodEdit = false;
      this.extMethodForm = {
        index: null,
        ext_method_name: "",
        type: "",
        ext_method: "",
        expect_result: {},
      };
      this.$emit("update:extMethod", this.extMethodForm);
      this.$refs["extMethodForm"].resetFields();
    },
    handleTestsuiteExtMethodSubmit() {
      this.$emit("updateSelectedExtMethod", this.extMethodForm);
      this.handleTestsuiteExtMethodCancel();
    },
    filterExtMethod(value, option) {
      return option.indexOf(value) !== -1;
    },
  },
};
</script>
<style scoped>
expect-result-label {
  font-size: 14px;
  color: #515a6e;
  padding: 10px 12px 10px 0;
}
</style>